<style lang="scss" scoped>
.table_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .table_top {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .table_bottom {
    font-size: 14px;
  }
}
</style>

<template>
  <div class="table_item">
    <div class="table_top">{{ roi }}</div>
    <div class="table_bottom">新：{{ showNumber }}元</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  roi: {
    type: String,
    default: '88.88%'
  },
  price: {
    type: [Number, String],
    default: 200
  }
})
const showNumber = computed(() => {
  return (props.price || 0).toFixed(2)
})
</script>